<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-12-04 00:12:59
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-12-26 14:53:11
 * @FilePath: \dance\pages\collect\components\videos.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="videos">
    <view v-for="item in ajax.list" class="item" @click="onGoVideo(item)">
      <uv-image :src="item.cover" width="100%" height="100%" mode="aspectFill"></uv-image>
    </view>
  </view>
</template>

<script setup>
  import { defaultImages, defaultImagesList, gradeOptions, shareList } from '@/common/js/global.js';
  import flow from '@/pages/index/index3Compontents/flow.vue';
  import { ref, getCurrentInstance, watch, reactive, nextTick } from 'vue';
  import debounce from '@/uni_modules/uv-ui-tools/libs/function/debounce.js';
  import { getWeek } from '@/common/js/fn.js';
  const instance = getCurrentInstance();
  const props = defineProps({
    current: {
      type: Number,
      default: 0
    },
    top: {
      type: Number,
      default: 0
    }
  });
  let params = reactive({
    pageSize: 10,
    currentPage: 1,
    classify: 'Teacher',
    sort: 0
  });
  let ajax = reactive({
    list: [],
    totalPage: 1
  });

  let init = async () => {
    let options = JSON.parse(JSON.stringify(params));
    options.orderBy = ['Lesson', params.sort ? 'asc' : 'desc'];
    let { pagination, vidoes } = await uni.$uv.http.post('/app/collect/videos', options);
    ajax.totalPage = pagination.totalPage;
    ajax.list.push(
      ...vidoes.map(r => {
        return { ...r, cover: r.cover || defaultImagesList[0] };
      })
    );
  };
  watch(
    () => props.current,
    val => {
      if (val === 1) {
        ajax.list = [];
        init();
      }
    },
    { immediate: true }
  );

  let scrollOldTop = ref(0),
    scrollActive = ref(0);
  let autoVideo = () => {
    ajax.list.forEach(r => {
      r.autoVideo = false;
    });
    let num = scrollActive.value;
    // 如果是竖着的，那下个也要播放
    if (
      ['Lesson', 'MerchantLesson', 'Video'].includes(ajax.list[num].classify) &&
      ['Lesson', 'MerchantLesson', 'Video'].includes(ajax.list[num + 1].classify)
    ) {
      ajax.list[num + 1].autoVideo = true;
    }
    ajax.list[num].autoVideo = true;
  };
  // 滚动事件，然后加了个防抖
  const onScroll = ({ detail, active }) => {
    scrollOldTop.value = detail.scrollTop;
    scrollActive.value = active;
    autoVideo();
  };
  // 滚动到底部
  const scrolltolower = active => {
    scrollActive.value = active;
    autoVideo();
    if (params.currentPage >= ajax.totalPage) return;
    params.currentPage++;
    init();
  };
  const onGoVideo = val => {
    uni.$uv.route({
      url: '/pages/teacher/videoPreview',
      params: {
        id: val.id
      }
    });
  };
</script>

<style lang="scss" scoped>
  .videos {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 33.3333%;
      height: 341.86rpx;
    }
  }
</style>
